<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>
                    答卷管理
                    <el-button type="text" @click="$router.push({ name: 'PapersIndex' })">返回</el-button>
                </div>
            </template>
            <div id="main" style="height: 300px;"></div>
            <el-table :data="answers.result" border stripe>
                <el-table-column prop="_id" label="问卷id"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <div>
                            <el-button type="text" @click="$router.push({ name: 'AnswersLook', params: { id: row._id } })">
                                查看
                            </el-button>
                            <el-button type="text" @click="delAnswerLoading(row._id)">
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div style="margin-top: 20px">
            <el-pagination :page-size="perPage" layout=" prev, pager, next" :total="answers.count" background
                @current-change="changPage">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {mapActions} from 'vuex';
import * as echarts from "echarts";
export default {
    props: ["id"],
    data() {
        return {
            answers: [],
            loading: false,
            page: 1,
            perPage: 1,
        }
    },
    computed: {
        answersData() {
            if (this.answers.result.length === 0) {
                return []
            };
            
            // 统计每个选项的数量
            const total = {};
            this.answers.result.forEach(el => {
                el.outlines.forEach(({ answer }) => {
                    // 判断total中是否有该答案 ，有就加
                    if (total[answer]) {
                        total[answer]++;
                    } else {
                        total[answer] = 1;
                    }
                })
            });

            const data = this.answers.result[0].items.reduce((arr,el)=>{
                arr.push({name:el.itemname,value:total[el.itemname]})
                return arr;
            },[]);
            return data;
        },
    },
    async mounted() {
        await this.getAnswersLoading();
        this.showPie(); // 调用
    },
    methods: {
        ...mapActions('answers', ['getAnswers','delAnswer']),
        changPage(e) {
            this.page = e
            this.getAnswersLoading();
        },
        showPie() {
            const myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: this.answersData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                        },
                    },
                ],
            });
        },
        async getAnswersLoading() {
            this.loading = true;
            try {
                const { data } = await this.getAnswers({ 
                    paperId: this.id,
                    page: this.page,
                    perPage: this.perPage,
                });
                this.answers = data;
            } catch (error) { }
            this.loading = false;
        },
        async delAnswerLoading(id) {
            try {
                await this.$confirm("确定删除吗?");
                await this.delAnswer(id);
                await this.getAnswersLoading();
            } catch (error) { }
        },
    },
};
</script>